<template>
  <div class="page-content padding padding-top workdetail">
    <iframe style="width:100%;height:100%;overflow:hidden;overflow-y:auto;" v-if="showframe" :src="frameUrl" frameborder="0"></iframe>
    <!-- <iframe style="width:100%;height:100%;" src="https://admin.huoxingy.com/static/changeWorkDetail/index.html?workShiftId=o5HdeyIY-SNlL-45b-84oU-d6NbygGv" frameborder="0"></iframe> -->
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "workDetail",
  data() {
    return {
      frameUrl:"",
      showframe:false,
      api:window.API_BASE_URL,
      memberDeposit:0,
      workShiftId: "", //当前班次id
      pieForIncome: null, //收入饼状图
      pieForOut: null, //支出饼状图
      pageSize: 10,
      gradeDataForPie: {
        adminPayBill: {
          ali: 0,
          cash: 0,
          returnTotal: 0,
          wx: 0
        },
        refundTotalAmount: 0, //退总款金额
        successTotalAmount: 0 //总收入
      }, //经营日报的数据
      showPie:false//在没有数据的情况下是否显示饼状图
    };
  },
  methods: {
    //分页方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getData(val - 1, false);
    },
    drawPieForIncome(data,incomeData) {
      if (this.pieForIncome) {
        this.pieForIncome.dispose();
      }
      this.pieForIncome = echarts.init(document.getElementById("income-pie"));
      let legendData = [];
      for(let i=0;i<incomeData.length;i++){
        legendData.push(incomeData[i].name);
      }
      let option = {
        title: {
          text: `总收入:${Number(data.successTotalAmount).toFixed(2)}( ${data.successCount}笔 )`,
          x: "left",
          padding: 15,
          textStyle: {
            color: "#000",
            fontSize: 15
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data:legendData,
            top:"middle",
            type:"scroll"
        },
        // color: ["#55a8dc", "#6fcd58", "#e78d61", "#000000"],
        series: [
          {
            name: "收入来源",
            type: "pie",
            radius: "55%",
            center: ['25.9%', '50%'],
            label: {
              normal: {
                position: "inner",
                show: false
              }
            },
            data: incomeData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      setTimeout(() => {
        this.pieForIncome.setOption(option);
      }, 200);
    },
    drawPieForOut(data) {
      if (this.pieForOut) {
        this.pieForOut.dispose();
      }
      this.pieForOut = echarts.init(document.getElementById("out-pie"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        title: {
          text: `退单:${Number(data.refundTotalAmount).toFixed(2)}( ${data.refundCount}笔 )`,
          x: "left",
          padding: 15,
          textStyle: {
            color: "#000",
            fontSize: 15
          }
        },
        color: ["#37d6b7"],
        series: [
          {
            name: "退单",
            type: "pie",
            radius: ["30%", "55%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: data.refundTotalAmount, name: "退款" }]
          }
        ]
      };
      setTimeout(() => {
        this.pieForOut.setOption(option);
      }, 200);
    },
    //获取数据
    getData(page = 0, isUpdatePie = true) {
      $loading.show("拼命加载中...");
      this.$http({
        url: "get-storeBill",
        method: "GET",
        params: {
          workShiftId: this.$route.query.workShiftId,
          source:"workShift",
          page: page,
          size: this.pageSize,
          type:"DAY"
        }
      }).then(res => {
        if (res.status === 200) {
          console.log(res);
          $loading.hide();
          this.gradeDataForPie = res.data;
        // 
          let data = res.data;
          let billInfo = JSON.parse(data.adminPayBill);
          let incomeData = [];
          if(billInfo.adminPayBill.length){
            this.showPie = true;
            // 提取信息
            for(let i = 0;i<billInfo.adminPayBill.length;i++){
              let amountObj = {};
              amountObj.value = Number(billInfo.adminPayBill[i].amount).toFixed(2);
              amountObj.count = billInfo.adminPayBill[i].count;
              switch (billInfo.adminPayBill[i].channel) {
                // case "pay.weixin.micropay":
                //   amountObj.name = "微信刷卡";
                //   amountObj.itemStyle = { normal: { color: "#e29fbf" } };
                //   break;
                // case "pay.alipay.micropay":
                //   amountObj.name = "支付宝刷卡";
                //   amountObj.itemStyle = { normal: { color: "#d69947" } };
                //   break;
                // case "pay.jdpay.micropay":
                //   amountObj.name = "京东刷卡";
                //   amountObj.itemStyle = { normal: { color: "#d17c42" } };
                //   break;
                case "jdMicroPay":
                  amountObj.name = "京东刷卡";
                  amountObj.itemStyle = { normal: { color: "#d17c42" } };
                  break;
                // case "pay.qq.micropay":
                //   amountObj.name = "QQ钱包刷卡";
                //   amountObj.itemStyle = { normal: { color: "#b3c125" } };
                //   break;
                case "qqMicroPay":
                  amountObj.name = "QQ钱包刷卡";
                  amountObj.itemStyle = { normal: { color: "#b3c125" } };
                  break;
                // case "pay.shiming.micropay":
                //   amountObj.name = "会员卡";
                //   amountObj.itemStyle = { normal: { color: "#1c9cba" } };
                //   break;
                case "smMicroPay":
                  amountObj.name = "会员卡";
                  amountObj.itemStyle = { normal: { color: "#1c9cba" } };
                  break;
                // case "pay.unionpay.micropay":
                //   amountObj.name = "银联支付";
                //   amountObj.itemStyle = { normal: { color: "#ff9e9c" } };
                //   break;
                case "unionPay":
                  amountObj.name = "银联支付";
                  amountObj.itemStyle = { normal: { color: "#ff9e9c" } };
                  break;
                // case "pay.bestpay.micropay":
                //   amountObj.name = "翼支付";
                //   amountObj.itemStyle = { normal: { color: "#ea7f5e" } };
                //   break;
                case "wingPayAmount":
                  amountObj.name = "翼支付";
                  amountObj.itemStyle = { normal: { color: "#ea7f5e" } };
                  break;
                // case "pay.weixin.native":
                //   amountObj.name = "微信扫码";
                //   amountObj.itemStyle = { normal: { color: "#8ecc52" } };
                //   break;
                // case "pay.alipay.native":
                //   amountObj.name = "支付宝扫码";
                //   amountObj.itemStyle = { normal: { color: "#41bbd8" } };
                //   break;
                case "CASH":
                  amountObj.name = "现金";
                  amountObj.itemStyle = { normal: { color: "#3bbddb" } };
                  break;
                case "cashAmount":
                  amountObj.name = "现金";
                  amountObj.itemStyle = { normal: { color: "#3bbddb" } };
                  break;
                case "WECHATPAY":
                  amountObj.name = "微信";
                  amountObj.itemStyle = { normal: { color: "#51c332" } };
                  break;
                case "wechatAmount":
                  amountObj.name = "微信";
                  amountObj.itemStyle = { normal: { color: "#51c332" } };
                  break;
                case "ALIPAY":
                  amountObj.name = "支付宝";
                  amountObj.itemStyle = { normal: { color: "#56abe4" } };
                  break;
                case "alipayAmount":
                  amountObj.name = "支付宝";
                  amountObj.itemStyle = { normal: { color: "#d69947" } };
                  break;
                case "UNIONPAY":
                  amountObj.name = "银联";
                  amountObj.itemStyle = { normal: { color: "#ff9e9c" } };
                  break;
                case "ALIPAY_CASH":
                  amountObj.name = "支付宝线下";
                  amountObj.itemStyle = { normal: { color: "#d69947" } };
                  break;
                case "WECHATPAY_CASH":
                  amountObj.name = "微信线下";
                  amountObj.itemStyle = { normal: { color: "#51c332" } };
                  break;
                case "COUPON":
                  amountObj.name = "优惠券";
                  amountObj.itemStyle = { normal: { color: "#619ce2" } };
                  break;
                case "couponAmount":
                  amountObj.name = "优惠券";
                  amountObj.itemStyle = { normal: { color: "#619ce2" } };
                  break;
                case "MEMBER":
                  amountObj.name = "会员";
                  amountObj.itemStyle = { normal: { color: "#1c9cba" } };
                  break;
                case "memberAmount":
                  amountObj.name = "会员";
                  amountObj.itemStyle = { normal: { color: "#1c9cba" } };
                  break;
                case "memberRechargeAmount":
                  amountObj.name = "会员充值";
                  amountObj.itemStyle = { normal: { color: "#1c9cba" } };
                  break;
                default:
                  break;
              }
              amountObj.name = `${amountObj.name}:${amountObj.value}元(${amountObj.count}笔)`
              // amountObj[billInfo.amount[i][0]] =  billInfo.amount[i][1];
              incomeData.push(amountObj);
            }
            console.log(incomeData);
            setTimeout(()=>{
              this.drawPieForIncome(data,incomeData);
              this.drawPieForOut(this.gradeDataForPie);
            },300);
          }else{
            this.showPie = false;
            setTimeout(()=>{
              this.drawPieForOut(this.gradeDataForPie);
            },300);
            if (this.pie) {
              this.pie.dispose();
            }
          }
        // 

          // //绘制饼图
          // if (isUpdatePie) {
          //   this.drawPieForIncome(this.gradeDataForPie);
          //   this.drawPieForOut(this.gradeDataForPie);
          // }
        }
      });
    },
    getMemberDeposit(){
      this.$http({
        url:"get-memberDeposit",
        method:"GET",
        params:{
          id:this.$route.query.workShiftId
        }

      }).then(res=>{
        this.memberDeposit = res.data[0].amount;
      });
    }
  },
  mounted() {
    // 获取数据初进页面，没有订单号查询
    this.workShiftId = this.$route.query.workShiftId;
    this.frameUrl = `https://${this.api.indexOf('staging')!=-1?'staging-admin':'admin'}.huoxingy.com/static/changeWorkDetail/index.html?workShiftId=${this.$route.query.workShiftId}`;
    setTimeout(() => {
      this.showframe = true;
    }, 250);
    this.getData();
    this.getMemberDeposit();
    console.log(this.$route.query);
  }
};
</script>

<style lang="scss" scoped>
@import "./workDetail.scss";

</style>
